<script setup>
import { onMounted, ref, getCurrentInstance, watch } from "vue";

let internalInstance = getCurrentInstance();
let echarts = internalInstance.appContext.config.globalProperties.$echarts;

const { data } = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const selectValue1 = ref("");
const selectValue2 = ref("");
const selectValue3 = ref("");
let myChart = null;
const chartBox = ref(null);

const choosedData = ref([]);

const initChart = (id) => {
  if (!id) return;
  let options = {};
  if (id == 1) {
    options = {
      legend: {},
      tooltip: {},
      grid: {
        bottom: "20%",
      },
      dataset: {
        source: [
          ["公司", choosedData.value[0].name, choosedData.value[1].name],
          [
            "注册资金（万元）",
            choosedData.value[0].register,
            choosedData.value[1].register,
          ],
          [
            "人员数量（人）",
            choosedData.value[0].employee,
            choosedData.value[1].employee,
          ],
          [
            "公司资质（项）",
            choosedData.value[0].qualification,
            choosedData.value[1].qualification,
          ],
          [
            "知识产权（项）",
            choosedData.value[0].patent,
            choosedData.value[1].patent,
          ],
          [
            "历史合同金额（万元）",
            choosedData.value[0].historyMoney,
            choosedData.value[1].historyMoney,
          ],
          ["垫资能力", choosedData.value[0].loan, choosedData.value[1].loan],
          [
            "属地支撑",
            choosedData.value[0].localSupport,
            choosedData.value[1].localSupport,
          ],
          [
            "供货周期",
            choosedData.value[0].deliveryCycle,
            choosedData.value[1].deliveryCycle,
          ],
          [
            "价格水平",
            choosedData.value[0].priceLevel,
            choosedData.value[1].priceLevel,
          ],
          [
            "运营运维能力",
            choosedData.value[0].operation,
            choosedData.value[1].operation,
          ],
        ],
      },
      xAxis: {
        type: "category",
        axisLabel: {
          interval: 0, //代表显示所有x轴标签显示
          rotate: 45,
        },
      },
      yAxis: { type: "value" },
      series: [{ type: "bar" }, { type: "bar" }],
    };
  }
  if (id == 2) {
    options = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: [choosedData.value[0].name, choosedData.value[1].name],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "10%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          interval: 0, //代表显示所有x轴标签显示
          rotate: 45,
        },
        data: [
          "注册资金（万元）",
          "人员数量（人）",
          "公司资质（项）",
          "知识产权（项）",
          "历史合同金额（万元）",
          "垫资能力",
          "属地支撑",
          "供货周期",
          "价格水平",
          "运营运维能力",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: choosedData.value[0].name,
          type: "line",
          stack: "Total",
          data: [
            choosedData.value[0].register,
            choosedData.value[0].employee,
            choosedData.value[0].qualification,
            choosedData.value[0].patent,
            choosedData.value[0].historyMoney,
            choosedData.value[0].loan,
            choosedData.value[0].localSupport,
            choosedData.value[0].deliveryCycle,
            choosedData.value[0].priceLevel,
            choosedData.value[0].operation,
          ],
        },
        {
          name: choosedData.value[1].name,
          type: "line",
          stack: "Total",
          data: [
            choosedData.value[1].register,
            choosedData.value[1].employee,
            choosedData.value[1].qualification,
            choosedData.value[1].patent,
            choosedData.value[1].historyMoney,
            choosedData.value[1].loan,
            choosedData.value[1].localSupport,
            choosedData.value[1].deliveryCycle,
            choosedData.value[1].priceLevel,
            choosedData.value[1].operation,
          ],
        },
      ],
    };
  }
  // if (id == 3) {
  //   options = {
  //     legend: {
  //       data: [choosedData.value[0].name, choosedData.value[1].name],
  //     },
  //     radar: {
  //       indicator: [
  //         { name: "注册资金（万元）", max: 500000 },
  //         { name: "人员数量（人）", max: 10000 },
  //         { name: "公司资质（项）", max: 5000 },
  //         { name: "知识产权（项）", max: 5000 },
  //         { name: "历史合同金额（万元）", max: 100000 },
  //         { name: "垫资能力", max: 10 },
  //         { name: "属地支撑", max: 10 },
  //         { name: "供货周期", max: 10 },
  //         { name: "价格水平", max: 10 },
  //         { name: "运营运维能力", max: 10 },
  //       ],
  //       axisName: {
  //         formatter: "【{value}】",
  //         color: "#428BD4",
  //       },
  //     },

  //     series: [
  //       {
  //         type: "radar",
  //         emphasis: {
  //           lineStyle: {
  //             width: 4,
  //           },
  //         },
  //         data: [
  //           {
  //             value: [
  //               choosedData.value[0].register,
  //               choosedData.value[0].employee,
  //               choosedData.value[0].qualification,
  //               choosedData.value[0].patent,
  //               choosedData.value[0].historyMoney,
  //               choosedData.value[0].loan,
  //               choosedData.value[0].localSupport,
  //               choosedData.value[0].deliveryCycle,
  //               choosedData.value[0].priceLevel,
  //               choosedData.value[0].operation,
  //             ],
  //             name: choosedData.value[0].name,
  //             areaStyle: {
  //               color: "rgba(88, 216, 255, 0.6)",
  //             },
  //           },
  //           {
  //             value: [
  //               choosedData.value[1].register,
  //               choosedData.value[1].employee,
  //               choosedData.value[1].qualification,
  //               choosedData.value[1].patent,
  //               choosedData.value[1].historyMoney,
  //               choosedData.value[1].loan,
  //               choosedData.value[1].localSupport,
  //               choosedData.value[1].deliveryCycle,
  //               choosedData.value[1].priceLevel,
  //               choosedData.value[1].operation,
  //             ],
  //             name: choosedData.value[1].name,
  //             areaStyle: {
  //               color: "rgba(255, 228, 52, 0.6)",
  //             },
  //           },
  //         ],
  //       },
  //     ],
  //   };
  // }
  myChart.setOption(options);
};

onMounted(() => {
  myChart = echarts.init(chartBox.value);
});

watch(
  () => [selectValue1, selectValue2, selectValue3],
  ([value1, value2, value3]) => {
    choosedData.value = data.filter((item) => {
      return item.id == value1.value || item.id == value2.value;
    });
    if (choosedData.value.length != 2) return;
    initChart(value3.value);
  },
  { deep: true }
);

window.addEventListener("resize", () => {
  myChart.resize();
});
</script>

<template>
  <div class="main_box">
    <div class="header">
      <div class="select_box">
        <div class="select_title">对比选择：</div>
        <el-select placeholder="请选择公司" v-model="selectValue1">
          <el-option
            v-for="item in data"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select placeholder="请选择公司" v-model="selectValue2">
          <el-option
            v-for="item in data"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <div class="select_title">图表选择：</div>
        <el-select placeholder="请选择图表" v-model="selectValue3">
          <el-option label="柱状图" value="1"></el-option>
          <el-option label="折线图" value="2"></el-option>
          <el-option label="雷达图" value="3"></el-option>
        </el-select>
      </div>
      <el-icon class="close" size="30" @click="$emit('close')"
        ><CircleClose
      /></el-icon>
    </div>
    <div class="chartBox" ref="chartBox"></div>
  </div>
</template>

<style lang="scss" scoped>
.main_box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1130px;
  height: 600px;
  padding: 10px;
  background: white;
  border-radius: 16px;
  z-index: 10;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  .header {
    display: flex;
    justify-content: space-between;
    .select_box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 1130px;
      .select_title {
        font-size: 16px;
        color: #818181;
        font-weight: bold;
      }
      div {
        width: 80px;
      }
      .el-select {
        width: 200px;
      }
    }
  }
  .chartBox {
    width: 1130px;
    height: 550px;
    margin-top: 30px;
  }
}
</style>
